<template>
  <div style="position: absolute;top: -380px;z-index: 10">
    <div class="search">
      <el-tabs tab-position="left" style="height: 340px">
        <el-tab-pane label="我想租赁">
          <span slot="label" style="display: flex;align-items: center"><i class="icon-1"></i> 我想租赁</span>
        <!--  <el-tabs v-model="activeName">
            <el-tab-pane :label="item.label" :name="item.name" v-for="(item,index) in rightTabList"
                         :key="index">

            </el-tab-pane>
          </el-tabs>-->
          <el-form label-position="left" style="margin-top: 35px">
            <!--<el-form-item label="">
              <el-radio-group v-model="activeRadio">
                <el-radio v-for="(item,index) in radioList" :key="index" :label="item.value">{{item.label}}
                </el-radio>
              </el-radio-group>
            </el-form-item>-->
            <el-row>
              <el-col :span="12">
                <el-form-item label="期望区域" label-width="96px">
                  <el-select size="small" v-model="value">
                    <el-option v-for="(lable,value) in areas" :label="lable" :value="value"/>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="面积" label-width="96px">
                  <el-select size="small" v-model="value1">
                    <el-option v-for="(lable,value) in acreageArr" :label="lable" :value="value"/>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="期望租金金额" label-width="96px">
                  <el-select size="small" v-model="value2">
                    <el-option v-for="(lable,value) in rentArr" :label="lable" :value="value"/>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="期望租赁年限" label-width="96px">
                  <el-select size="small" v-model="value3">
                    <el-option value="1" label="半年"></el-option>
                    <el-option value="2" label="1年"></el-option>
                    <el-option value="3" label="3年"></el-option>
                    <el-option value="4" label="5年"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="免租期限" label-width="96px">
                  <el-select size="small" v-model="value4">
                    <el-option value="1" label="无"></el-option>
                    <el-option value="2" label="1月"></el-option>
                    <el-option value="3" label="3月"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="转让费金额" label-width="96px">
                  <el-select size="small" v-model="value5">
                    <el-option value="1" label="0"></el-option>
                    <el-option value="2" label="1000元"></el-option>
                    <el-option value="3" label="3000元"></el-option>
                    <el-option value="4" label="5000元"></el-option>
                    <el-option value="4" label="10000元"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item>
              <el-button type="danger" style="width: 280px;background-color:rgba(228,30,29,1);margin-top: 50px" @click="$router.push('/findshop')">立即搜索</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="我要转让/出售">
          <a slot="label" style="display: flex;align-items: center" @click="login"><i class="icon-2"></i> 我要转让/出售</a>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
  export default {
    name: "search",
    data() {
      return {
        activeName: '1',
        activeRadio: '1',
        rightTabList: [
          {
            label: '餐饮',
            name: '1'
          },
          {
            label: '超市便利',
            name: '2'
          },
          {
            label: '生活服务',
            name: '3'
          },
          {
            label: '美容美发',
            name: '4'
          },
          {
            label: '酒店住宿',
            name: '5'
          }

        ],
        radioList: [
          {
            label: '西餐',
            value: '1'
          },
          {
            label: '中餐',
            value: '2'
          },
          {
            label: '咖啡',
            value: '3'
          },
          {
            label: '冷饮',
            value: '4'
          },
          {
            label: '面包甜点',
            value: '5'
          }, {
            label: '水果',
            value: '6'
          }
        ],
        value:'',
        value1:'',
        value2:'',
        value3:'',
        value4:'',
        value5:'',
        acreageArr: [
          "20㎡以下",
          "20-50㎡",
          "50-100㎡",
          "100-200㎡",
          "200㎡-500㎡",
          "500㎡以上"
        ],
        rentArr: [
          "2千元以下",
          "2-5千元",
          "5千-1万元",
          "1-2万元",
          "2-5万元",
          "5万元以上"
        ],
      }
    },
    methods:{
      login(){
        if (!this.$store.state.userInfo.userId) {
          this.$router.push('/login')
        }else {
          this.$router.push('/setting/myneed')
        }
      }
    },
    computed: {
      areas() {
        return this.$store.state.areas;
      }
    }
  }
</script>

<style scoped lang="less">
  .search {
    width: 630px;
    height: 340px;
    background-color: #fff;

    /deep/ .el-tabs__nav {
      .el-tabs__item {
        font-size: 14px;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        a{
          color: rgba(51, 51, 51, 1);
        }
      }

      .is-active {
        color: #E41E1D;
        a{
          color: #E41E1D;
        }
        .icon-1 {
          background: url("../../../static/img/zufang_s.png") no-repeat center/100%;
        }

        .icon-2 {
          background: url("../../../static/img/zhuanrnag_s.png") no-repeat center/100%;
        }
      }
    }

    /deep/ .el-tabs__header.is-left {
      background: rgba(243, 243, 243, 1);

      .el-tabs__item {
        border-bottom: 1px solid rgba(225, 225, 225, 1);
        height: 60px;
        line-height: 60px;
      }
    }

    /deep/ .el-radio {
      margin-right: 22px;
    }

    /deep/ .el-select {
      width: 124px;
    }

    /deep/ .el-form-item {
      margin-bottom: 9px;
    }

    /deep/ .el-form-item__label {
      font-size: 14px;
      font-weight: bold;
      color: rgba(153, 153, 153, 1);
      padding-right: 10px;
    }

    /deep/ .el-radio__label {
      font-size: 12px;
      font-weight: bold;
      color: rgba(51, 51, 51, 1)
    }

    /deep/ .el-col-12 {
      padding-right: 16px;
    }

    .icon-1 {
      width: 17px;
      height: 17px;
      display: inline-block;
      background: url("../../../static/img/zufang_d.png") no-repeat center/100%;
      margin-right: 6px;
    }

    .icon-2 {
      width: 17px;
      height: 17px;
      display: inline-block;
      background: url("../../../static/img/zhuanrnag_d.png") no-repeat center/100%;
      margin-right: 6px;
    }
  }
</style>
